<template>
	<div class="parent">
    <form method='post' action='/api/user/upload' enctype='multipart/form-data'>
        <span>{{userName}}</span>
        <img class="head_img" src="../../server/uploads/avatar-3449c9e5e332f1dbb81505cd739fbf3f.jpg" alt="">
        用户名：<input name="text" type="text" v-model="userName"/>
        选择图片：<input name="avatar" id='upfile' type='file'/>
        <input type='submit' value='提交'/>
    </form>
		<h1>这是ParentUser</h1>
		<p>父组件显示信息：{{data}}</p>
		<hr>
		<first-child @childToParentMsg="showChildToParentMsg" :parentToChild="parentMsg"></first-child>
		<second-child @toggleByParent="toggleChildToParent" :parentToMe="item" v-for="item in items" :key="item.m_id"></second-child>
	</div>
</template>

<script>
import firstChild from '@/components/firstChild'
import secondChild from '@/components/secondChild'

export default {
  name: 'user',
  data () {
    return {
    	parentMsg:"这是父组件向子组件传值",
    	data:"",
    	items:[],
      userName:""
    }
  },
  methods:{
  	showChildToParentMsg: function(data){
  		alert("父组件显示信息:" + data)
  		this.data = data
  	},
  	toggleChildToParent: function(obj){
  		if (obj.isStart) {
			obj.isStart = !obj.isStart;
		} else {
			this.items = this.items.map(function(ele){
				ele.isStart = ele.m_id == obj.m_id ? true : false
				return ele
			})
  		}
  	},
    getMessages: function(){
      this.$axios.get('/api/user/getMessages')
      .then((res) => {
        this.items = res.data.map((ele) => {
          ele.isStart = ele.isStart === "false" ? false : true
          return ele
        })
        // console.log(this.items)
        // console.log(typeof this.items[0].isStart)
      })
      .catch((err) => {
        console.log(err)
      })
    }
  },
  mounted(){
    this.getMessages()
  },
  components:{
  	firstChild,
  	secondChild
  }
}
</script>

<style scoped>
  .form-upload-single{
    padding: 50px 0;
    border-bottom: 1px dashed red;
  }
  .form-upload-multi{
    padding: 50px 0;
    border-bottom: 1px dashed green;
  }
  .download-file{
    padding:50px 0;
    border-bottom: 1px dashed blue;
  }
  form input[type=submit]{
    border:1px solid #20A0FF;
    background-color: #20A0FF;
    padding: 5px 15px;
    border-radius: 5px;
    color: #fff;
  }
  form input[type=file]{
    margin: 20px auto;
  }
  form input[type=text]{
    padding:5px 8px;
    border:1px solid #ddd;
    border-radius: 3px;
  }
  form{border-bottom: 1px dashed #ddd;}
  .head_img{
    display: inline-block;
    width: 200px;
    height: 200px;
    border:0;
    border-radius: 50%;
  }
</style>
